<template>
  <div class="catelist">
    <div class="listBox">
      <div>
        <ul>
          <li v-for="(cate, ins) in cates" :key="ins">
            <span @click="change(cate.idname)">{{ cate.idname }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      cates: [],
    };
  },
  mounted(){
    this.axios.get('/navlist').then(res=>{
      this.cates=res.data.result
      this.cates.unshift({idname:"全部分类"})
    })
  },
  methods: {
    change(value) {
      localStorage.setItem("cate", value);
      this.$store.commit("isShow");
      this.$store.commit("cateChange", value);
      if (value == "全部分类") {
        this.axios.get("/moreyc").then((res) => {
          this.$store.commit("tickets", res.data.result);
        });
      } else {
        this.axios.get("/every?cate=" + value).then((res) => {
          this.$store.commit("tickets", res.data.result);
        });
      }
    },
  },
};
</script>

<style scoped>
.catelist {
  position: relative;
}
/* 设置分类位置及占地 */
.catelist .listBox {
  /* background-color: rgba(0,0,0,0.3); */
  height: 80vh;
  width: 100vw;
  position: absolute;
  left: -20px;
  overflow: hidden;
  z-index: 2;
}
.catelist .listBox div {
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  height: 60%;
  overflow: scroll;
}
/* 分类样式 */
.catelist .listBox div ul {
  background-color: #fff;
  padding-left: 20px;
}
.catelist .listBox div ul {
  list-style: none;
}
/* 分类各项具体样式 */
.catelist .listBox div ul li {
  border-top: solid 1px #e7e7e7;
}
.catelist .listBox div ul li span {
  display: block;
  text-align: left;
  padding: 20px 0;
}
</style>
